<template>
  <el-card id="expertList">
    <div class="container" v-for='(value, key, index) in experts' @click="expert(value.id)">
      <img class="avatar" v-bind:src="value.img"/>
      <div class="right">
        <label>{{value.name}}</label>
        <label class="intro">专家介绍</label>
      </div>
    </div>
    <el-divider/>
  </el-card>
</template>
<script>
import expert from '@/api/expert'
export default {
  data() {
    return {
      experts: []
    }
  },
  mounted() {
    expert.list().then(res => {
      console.log(res)
      this.experts = res.data
    });
  },
  methods: {
    expert(id) {
      this.$router.push({ //路由跳转
        path: '/expert?id=' + id
      })
    }
  }
}
</script>
<style scoped>
  .container {
    display: flex;
    flex-direction: row;
  }
  .avatar {
    width: 88px;
    height: 88px;
  }
  .right {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
</style>